
* {
    margin: 0;
    padding: 0;
   /* box-sizing:border-box;*/
}

body {
    background-color: #4158D0;
    background-image: linear-gradient(81deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

}
.a1 {
    color: rgb(255, 255, 255);

    width: 100%;
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
.shell1{
    /* 先设置网格布局 */
    display: grid;
    padding: 20px;
    /* 定义网格布局中行与列之间间隙的尺寸 */
    grid-gap: 20px;
    /* 该属性规定网格布局中的列数和宽度 */
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    /* 设置网格中行的默认尺寸 */
    grid-auto-rows: 270px;
    /* 属性控制自动放置项目在网格中的插入方式为填充 */
    grid-auto-flow: dense;
}

.shell1>div {
    /* 弹性布局 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(61, 51, 51);
    border-radius: 5px;
    color: rgb(255, 255, 255);
    font: 50 50px 'Kristen ITC';
    position: relative;
}

span {
    position: absolute;
    top: -10px;
    left: 30px;
    text-shadow: -5px 0 rgb(0, 0, 0), 0 5px rgb(0, 0, 0), 5px 0 rgb(0, 0, 0), 0 -5px rgb(0, 0, 0);
}

.shell1 .wide{
    grid-column: span 2;
}
.shell1 .tall{
    grid-row: span 2;
}
.shell1 .big{
    grid-column: span 2;
    grid-row: span 2;
}

